<template>
  <div class="app-container">
    <div class="top">
      <div class="arrow" @click="arrow">
        <img src="../../src/assets/arrow1.png" alt="">
      </div>
      <div class="header">
        <p>新增工单</p>
      </div>
    </div>
<!--    表单-->
    <div class="content">
      <van-form @submit="onSubmit" :colon="true">
        <van-field
          v-model="newSticks.wNumber"
          name="wNumber"
          label="工单编号"
          placeholder="工单编号"
          :rules="[{ required: true, message: '请填写工单编号' }]"
        />
<!--        所属项目-->
        <van-field
          readonly
          clickable
          is-link
          name="wObject"
          :value="value1"
          label="所属项目"
          placeholder="点击选择所属项目"
          @click="showPicker1 = true"
          :rules="[{ required: true, message: '请选择所属项目', trigger: 'change' }]"
        />
        <van-popup v-model="showPicker1" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns1"
            @confirm="onConfirm1"
            @cancel="showPicker1 = false"
          />
        </van-popup>
<!--        工单来源-->
        <van-field
          readonly
          clickable
          is-link
          name="wSource"
          :value="value2"
          label="工单来源"
          placeholder="点击选择工单来源"
          @click="showPicker2 = true"
          :rules="[{ required: true, message: '请选择工单来源', trigger: 'change' }]"
        />
        <van-popup v-model="showPicker2" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns2"
            @confirm="onConfirm2"
            @cancel="showPicker2 = false"
          />
        </van-popup>
<!--        发生位置-->
        <van-field
          readonly
          clickable
          is-link
          name="wPosition"
          :value="value3"
          label="发生位置"
          placeholder="点击选择发生位置"
          @click="showPicker3 = true"
          :rules="[{ required: true, message: '请选择发生位置', trigger: 'change' }]"
        />
        <van-popup v-model="showPicker3" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns3"
            @confirm="onConfirm3"
            @cancel="showPicker3 = false"
          />
        </van-popup>
<!--        设备大类-->
        <van-field
          readonly
          clickable
          is-link
          name="wEquipmentType"
          :value="value4"
          label="设备大类"
          placeholder="点击选择设备大类"
          @click="showPicker4 = true"
          :rules="[{ required: true, message: '请选择设备大类', trigger: 'change' }]"
        />
        <van-popup v-model="showPicker4" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns4"
            @confirm="onConfirm4"
            @cancel="showPicker4 = false"
          />
        </van-popup>
<!--        故障时间-->
        <van-field
          readonly
          clickable
          is-link
          name="wTime"
          :value="value"
          label="故障时间"
          placeholder="点击选择故障时间"
          @click="showPicker = true"
          :rules="[{ required: true, message: '请选择故障时间', trigger: 'change' }]"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            v-model="currentDate"
            type="datetime"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>

<!--        新增按钮-->
        <div style="margin: 16px;">
          <van-button square block native-type="submit" style="background:linear-gradient(49deg, #7D7FF7 0%, #C9CAFD 100%);color: white;border-radius: 0.5rem;font-size: 1rem" >确认新增</van-button>
        </div>
      </van-form>
    </div>

  </div>
</template>

<script>
import router from '@/router'
import { addWorkOrderHome } from '@/api/index'
export default {
  name: 'add',
  data () {
    return {
      newSticks:{
        wNumber:'',
        wObject:'',
        wSource:'',
        wPosition:'',
        wEquipmentType:'',
        wTime:'',
      },
      username: '',
      value1: '',
      columns1: ['昆仑社区', '华山社区', '万年社区', '东尚社区', '华山社区', '万年社区', '东尚社区'],
      showPicker1: false,
      value2: '',
      columns2: ['硬件报警', 'PC录入', '移动端录入', '自动生成'],
      showPicker2: false,
      value3: '',
      columns3: ['36街坊', '35街坊', '16街坊', '21街坊'],
      showPicker3: false,
      value4: '',
      columns4: ['照明设备', '通风设备', '计算机设备', '品质巡查'],
      showPicker4: false,
      value5: '',
      columns5: ['设备故障', '环境故障', '人文故障', '其他故障'],
      showPicker5: false,
      value: '',
      currentDate: new Date(),
      showPicker: false
    }
  },
  props: {},
  watch: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    getShowPicker1(e){
      this.showPicker1 = true
      console.log(this.value1)
    },
    // 返回首页
    arrow () {
      router.push({
        path: '/'
      })
    },
    // 表单提交
    onSubmit (values) {
      console.log('submit', values)
      this.newSticks.wNumber = values.wNumber
      this.newSticks.wObject = this.columns1.indexOf(values.wObject)
      this.newSticks.wSource = this.columns2.indexOf(values.wSource) 
      this.newSticks.wPosition = this.columns3.indexOf(values.wPosition) 
      this.newSticks.wEquipmentType = this.columns4.indexOf(values.wEquipmentType) 
      this.newSticks.wTime = values.wTime
      console.log(this.newSticks)
      addWorkOrderHome(JSON.stringify(this.newSticks))
      this.$toast({
        message: '新增成功',
        position: 'top'
      })
      router.go(-1)
    },
    onConfirm1 (value) {
      this.value1 = value
      this.showPicker1 = false
    },
    onConfirm2 (value) {
      this.value2 = value
      this.showPicker2 = false
    },
    onConfirm3 (value) {
      this.value3 = value
      this.showPicker3 = false
    },
    onConfirm4 (value) {
      this.value4 = value
      this.showPicker4 = false
    },
    onConfirm5 (value) {
      this.value5 = value
      this.showPicker5 = false
    },
    // 时间戳
    timeFormat (time) { // 时间格式化
      const year = time.getFullYear()
      const month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : (time.getMonth() + 1)
      const day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate()
      const hour = time.getHours() < 10 ? '0' + time.getHours() : time.getHours()
      const minute = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes()
      // const second = time.getSeconds()
      return year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':00'
    },
    // 故障时间选择
    onConfirm () {
      this.value = this.timeFormat(this.currentDate)
      this.showPicker = false
    }
  },
  components: {}
}
</script>

<style lang='scss' scoped>
@import "./add.scss";
</style>
